<template>
	<view class="ticket-info">
		<view class="price">
			<view class="label font-oppo">￥</view>
			<view class="num font-oppo">{{ priceInCent(+price_in_cent) }}</view>
			<view class="at-least" v-if="sale_type === 10 && tour_date_type === 10">起</view>
		</view>
		<view class="display-name">{{ display_name }}</view>
		<view class="sale_labels">
			<view
				class="item"
				:style="{ color: item.color, borderColor: item.color }"
				v-for="(item, index) in sale_labels"
				:key="index"
			>
				{{ item.title }}
			</view>
		</view>
		<view class="intro">{{ intro }}</view>
		<view class="score">
			<view class="score_in_cent font-oppo">{{ scoreInCent(score_in_cent, 1) }}</view>
			<view class="comment">暂无点评</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from "vue"
import type { Price, SaleTips } from "@/types/ticket"
import { priceInCent, scoreInCent } from "@/mixins/mixins"

interface TicketInfoProps {
	display_name: string
	sale_tips: SaleTips[]
	intro: string
	score_in_cent: number
	prices: Price[]
	price_in_cent: string
	sale_type?: 10 | 20
	tour_date_type?: 10 | 20
}

const props = defineProps<TicketInfoProps>()

const isShowAmount = computed(() => props.prices?.[0]?.salable && !props.prices?.[0]?.sold_out)
const sale_labels = computed(() => props.sale_tips?.filter((item) => item.display_label))
</script>

<style lang="scss" scoped>
.ticket-info {
	position: relative;
	margin-top: 640rpx;
	margin-bottom: 16rpx;
	padding: 32rpx 24rpx 28rpx 24rpx;
	border-radius: 32rpx 32rpx 16rpx 16rpx;
	background-color: #fff;

	.price {
		display: inline-flex;
		align-items: baseline;
		margin-bottom: 8rpx;
		color: #fe4f2f;
		font-weight: 700;
		line-height: 36rpx;

		.label {
			font-size: 28rpx;
		}

		.num {
			font-size: 48rpx;
		}

		.at-least {
			margin-left: 4rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #fe4f2f;
			line-height: 40rpx;
		}
	}

	.display-name {
		margin-bottom: 8rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 56rpx;
	}

	.sale_labels {
		display: flex;
		align-items: center;

		.item {
			display: inline-flex;
			align-items: center;
			padding: 4rpx 8rpx;
			margin-right: 8rpx;
			border-radius: 8rpx;
			border: 1rpx solid #e5e6eb;
			font-size: 20rpx;
			color: #86909c;
			line-height: 28rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.intro {
		margin-top: 12rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #86909c;
		line-height: 34rpx;
	}

	.score {
		display: inline-flex;
		align-items: center;
		padding: 2rpx 12rpx 2rpx 0;
		height: 36rpx;
		background: rgba(255, 87, 24, 0.08);
		border-radius: 18rpx;

		.score_in_cent {
			height: 36rpx;
			padding: 0 10rpx;
			border-radius: 18rpx;
			border-top-right-radius: 0;
			margin-right: 12rpx;
			background: linear-gradient(270deg, #ff7229 0%, #ff5416 100%);
			font-weight: 900;
			font-size: 26rpx;
			color: #fff;
			line-height: 34rpx;
		}

		.comment {
			font-size: 24rpx;
			color: #1d2129;
			line-height: 36rpx;
		}
	}
}
</style>
